<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'scroll-view'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>Vertical Scroll\n纵向滚动</onekit-text>
			</onekit-view>
			<onekit-view onekit-class="page-section-spacing">
				<onekit-scroll-view onekit-style="height: 150px;" scroll-y="true" :scroll-into-view="toView" :scroll-top="scrollTop" @Scrolltoupper="upper" @Scrolltolower="lower" @Scroll="scroll">
					<onekit-view onekit-class="scroll-view-item demo-text-1" id="demo1"></onekit-view>
					<onekit-view onekit-class="scroll-view-item demo-text-2" id="demo2"></onekit-view>
					<onekit-view onekit-class="scroll-view-item demo-text-3" id="demo3"></onekit-view>
				</onekit-scroll-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>Horizontal Scroll\n横向滚动</onekit-text>
			</onekit-view>
			<onekit-view onekit-class="page-section-spacing">
				<onekit-scroll-view onekit-class="scroll-view_H" onekit-style="width: 100%" scroll-x="true" @Scroll="scroll">
					<onekit-view onekit-class="scroll-view-item_H demo-text-1" id="demo1"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-2" id="demo2"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-3" id="demo3"></onekit-view>
				</onekit-scroll-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>自定义下拉刷新\n自定义：</onekit-text>
			</onekit-view>
			<onekit-view onekit-class="page-section-spacing">
				<onekit-scroll-view onekit-style="width: 100%; height: 400px;" scroll-y :refresher-enabled="true" :refresher-threshold="80" refresher-default-style="none" refresher-background="lightgreen" @Refresherpulling="onekit_refresh_onPulling">
					<onekit-view onekit-class="refresh-container" onekit-style="display: block; width: 100%; height: 80px; background: #ECBDF0; display: flex; align-items: center;" slot="refresher">
						<onekit-view onekit-class="view1" onekit-style="position: absolute; color: white; text-align: center; width: 100%;">下拉刷新</onekit-view>
					</onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-1" id="demo1"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-2" id="demo2"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-3" id="demo3"></onekit-view>
				</onekit-scroll-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>默认：</onekit-text>
			</onekit-view>
			<onekit-view onekit-class="page-section-spacing">
				<onekit-scroll-view onekit-style="width: 100%; height: 400px;" scroll-y :refresher-enabled="true" :refresher-threshold="100" refresher-default-style="white" refresher-background="lightgreen" :refresher-triggered="triggered" @Refresherrestore="onRestore" @Refresherabort="onAbort" @Refresherpulling="onPulling" @Refresherrefresh="onRefresh">
					<onekit-view onekit-class="scroll-view-item_H demo-text-1" id="demo1"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-2" id="demo2"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-3" id="demo3"></onekit-view>
				</onekit-scroll-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>滚动驱动动画</onekit-text>
			</onekit-view>
			<onekit-view onekit-class="page-section-spacing">
				<onekit-scroll-view onekit-style="height: 150px;" id="scroll-view_D" scroll-y="true" :scroll-into-view="toView" :scroll-top="scrollTop" @Scrolltoupper="upper" @Scrolltolower="lower" @Scroll="scroll">
					<onekit-view onekit-class="scroll-view-item_H demo-text-1" id="scroll-sample-object1"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-2" id="scroll-sample-object2"></onekit-view>
					<onekit-view onekit-class="scroll-view-item_H demo-text-3" id="scroll-sample-object3"></onekit-view>
				</onekit-scroll-view>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "scroll-view",
  "pageOrientation": "auto",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
refresh:()=>import(`./scroll-view.refresh.js`)
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
const order = [
  'demo1',
  'demo2',
  'demo3'
];
export default Page(ONEKIT_JSON,["toView","scrollTop","true","refresh","onPulling","triggered"],ONEKIT_SJS,{
    "onLoad"(){
      this.animate('#scroll-sample-object1',[
      {
          "borderRadius":'0',
          "offset":0
},
      {
          "borderRadius":'25%',
          "offset":0.5
},
      {
          "borderRadius":'50%',
          "offset":1
}
    ],2000,{
        "scrollSource":'#scroll-view_D',
        "timeRange":2000,
        "startScrollOffset":0,
        "endScrollOffset":150
});
      this.animate('#scroll-sample-object2',[
      {
          "opacity":1,
          "offset":0
},
      {
          "opacity":0.5,
          "offset":0.5
},
      {
          "opacity":0.3,
          "offset":1
}
    ],2000,{
        "scrollSource":'#scroll-view_D',
        "timeRange":2000,
        "startScrollOffset":150,
        "endScrollOffset":300
});
      this.animate('#scroll-sample-object3',[
      {
          "background":"white",
          "offset":0
},
      {
          "background":"yellow",
          "offset":1
}
    ],2000,{
        "scrollSource":'#scroll-view_D',
        "timeRange":2000,
        "startScrollOffset":300,
        "endScrollOffset":400
});
    },
    "onPulling"(e){
      console.log('onPulling:',e);
    },
    "onRefresh"(){
      if(this._freshing)
      return;
      this._freshing = true;
      setTimeout(()=>{
      this.setData({
          "triggered":false
});
      this._freshing = false;
    },3000);
    },
    "onRestore"(e){
      console.log('onRestore:',e);
    },
    "onAbort"(e){
      console.log('onAbort',e);
    },
    "onShareAppMessage"(){
      return {
        "title":'scroll-view',
        "path":'page/component/pages/scroll-view/scroll-view'
};
    },
    "data":{
        "toView":'green',
        "triggered":false
},
    "upper"(e){
      console.log(e);
    },
    "lower"(e){
      console.log(e);
    },
    "scroll"(e){
      console.log(e);
    },
    "scrollToTop"(){
      this.setAction({
        "scrollTop":0
});
    },
    "tap"(){
      for(let i = 0;i < order.length;++i){
      if(order[i] == this.data.toView)
        {
          this.setData({
              "toView":order[i + 1],
              "scrollTop":((i + 1)) * 200
});
          break;
        }
    };
    },
    "tapMove"(){
      this.setData({
        "scrollTop":this.data.scrollTop + 10
});
    }
});

</script>
<style 
 lang="css">
.page-section-spacing {
  margin-top: 30px ;
}
.scroll-view_H {
  white-space: nowrap ;
}
.scroll-view-item {
  height: 150px ;
}
.scroll-view-item_H {
  display: inline-block ;
  width: 100% ;
  height: 150px ;
}
.demo-text-1 {
  position: relative ;
  align-items: center ;
  justify-content: center ;
  background-color: #1AAD19 ;
  color: #FFFFFF ;
  font-size: 18px ;
}
.demo-text-1:before {
  content: 'A' ;
  position: absolute ;
  top: 50% ;
  left: 50% ;
  transform: translate(-50%, -50%) ;
}
.demo-text-2 {
  position: relative ;
  align-items: center ;
  justify-content: center ;
  background-color: #2782D7 ;
  color: #FFFFFF ;
  font-size: 18px ;
}
.demo-text-2:before {
  content: 'B' ;
  position: absolute ;
  top: 50% ;
  left: 50% ;
  transform: translate(-50%, -50%) ;
}
.demo-text-3 {
  position: relative ;
  align-items: center ;
  justify-content: center ;
  background-color: #F1F1F1 ;
  color: #353535 ;
  font-size: 18px ;
}
.demo-text-3:before {
  content: 'C' ;
  position: absolute ;
  top: 50% ;
  left: 50% ;
  transform: translate(-50%, -50%) ;
}
</style>